<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-center demo</title>
    <style>
        /* 通用全局样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        /* Flexbox居中样式 */
        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh; /* 这行代码不能少，确保内容垂直居中 */
            text-align: center;
        }

        /* 背景和顶部导航 */
        .header {
            background-color: #333;
            color: white;
            padding: 20px;
        }

        .header a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            font-size: 16px;
        }

        .header a:hover {
            background-color: #575757;
        }

        .hero-section {
            background-color: #0073e6;
            color: white;
            padding: 60px 20px;
            text-align: center;
        }

        /* Hero区内容样式 */
        .hero-section h1 {
            font-size: 50px;
            margin-bottom: 20px;
        }

        .hero-section p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .cta-button {
            padding: 15px 30px;
            background-color: #ff9900;
            color: white;
            border: none;
            font-size: 18px;
            cursor: pointer;
            border-radius: 5px;
            text-transform: uppercase;
        }

        .cta-button:hover {
            background-color: #e68900;
        }

        /* 内容区 */
        .about-section {
            padding: 60px 20px;
            text-align: center;
            background-color: #f9f9f9;
        }

        .about-section h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .about-section p {
            font-size: 18px;
            line-height: 1.6;
            color: #666;
        }

        /* 页脚样式 */
        .footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <!-- 页头导航 -->
    <div class="header">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">产品</a>
        <a href="#">联系</a>
    </div>

    <!-- 英雄区（Hero Section），注意看这里的内容区域是水平垂直居中的 -->
    <div class="hero-section flex-center">
        <div>
            <h1>欢迎来到 XX 官网</h1>
            <p>我们提供创新的解决方案，帮助企业实现数字化转型。</p>
            <button class="cta-button">了解更多</button>
        </div>
    </div>

    <!-- 关于我们部分 -->
    <div class="about-section">
        <h2>关于我们</h2>
        <p>XX 公司致力于为客户提供领先的技术解决方案。我们专注于创新，秉承以客户为中心的理念，帮助企业提升效率，实现数字化转型。</p>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <p>&copy; 2024 XX公司. All Rights Reserved.</p>
    </div>

</body>
</html>
